<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    function onPlayMovie() {
      console.log('Playing movie');
    }
    function onStopMovie() {
      console.log('Stopping movie');
    }

    function MyApp({onPlayMovie, onStopMovie}) {
      return (
        <>
          <h1>Hello, world!</h1>
          <button onClick={onPlayMovie} style={{marginRight: '10px'}}>Play Movie</button >
          <button onClick={onStopMovie}>Stop Movie</button>
        </>
      )
    }

    const container = document.getElementById('root');
    const root = ReactDOM.createRoot(container);
    root.render(<MyApp onPlayMovie={onPlayMovie} onStopMovie={onStopMovie} />);

  </script>
</body>

</html>